<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>axios</title>
  <script type="text/javascript" src="https://unpkg.com/axios@1.2.0/dist/axios.min.js"></script>

</head>
<body>
<img src="/img/dog.jpg" width="100">
<button id="test">请求</button>
<button id="clear">清除</button>

<p id="result"></p>

<script>
  window.onload = function() {
    let testEL = document.getElementById("test");
    let clearEL = document.getElementById("clear");

    let resultEL = document.getElementById("result");

    testEL.addEventListener("click", test)
    clearEL.addEventListener("click", clear)


    function test() {
      // 发起一个post请求
      axios({
        method: 'post',
        url: '/test',
        data: {
          firstName: 'Fred',
          lastName: 'Flintstone'
        }
      }).then((response)=> {
        console.log(response)
        resultEL.innerText = response.data

      });
    }

    function clear() {
      resultEL.innerText = ""
    }
  }
</script>
</body>
</html>
